import { useEffect } from "react";
import { Form, Modal, Input } from 'antd'


interface Props {
  rowData: any;
  onClose: () => void;
  onFinish: (results: any) => void
}
const UserForm: React.FC<Props> = (props) => {
  const { onClose, rowData, onFinish } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue(rowData);
  }, [rowData])

  return (
    <Modal
      open
      title="角色信息"
      onOk={async () => {
        // 表单字段校验
        const data = await form.validateFields();
        // console.log('res', res);

        // 获取表单字段信息
        // const values = form.getFieldsValue();
        onFinish(data);
        onClose();

      }}
      onCancel={() => {
        onClose();
      }}
      onClose={() => {
        onClose();
      }}
      footer={null}
    >
      <Form form={form}>
        <Form.Item
          label="角色名称"
          name={"name"}
          rules={[
            {
              required: true,
              message: '必填项'
            }
          ]}

        >
          <Input size='large' placeholder='请输入角色名称' />
        </Form.Item>

        <Form.Item
          label="角色描述"
          name={"desc"}
          required
          rules={[
            {
              required: true,
              message: '必填项'
            }, {
              min: 5,
              max: 200,
              message: '限制字数为5-200'
            }]}
        >
          <Input size='large' placeholder='请输入角色描述' />
        </Form.Item>
      </Form>

    </Modal>
  )
}

export default UserForm;